<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script><div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">查看【{$data.arc_name}.{$data.arc_type}】</h4>
        </div>
        <div class="modal-body ">
            <form class="modalForm form-horizontal" action="{:url('index/Pics/setArc')}" method="post">
                <input type="hidden" name="id" value="{$data.arc_id}">
                <div class="portlet-body">
                    <div class="navbar navbar-default" role="navigation">
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li class="tags" data-id="1">
                                    <a href="#" >
                                        预览
                                    </a>
                                </li>
                                <li class="active tags" data-id="2">
                                    <a href="#" >
                                        档案信息
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>     

                    <script src="/static/assets/jwplayer/jwplayer.js"></script>
                    <script>jwplayer.key="bAoNHra71KE/mHvb0sirT4HeWLTAkpiYa1mVsA==";</script>

                    <div class="tab-pane" id="tab1" style="height: auto;display: none">

                        <!-- <iframe src="https://view.officeapps.live.com/op/view.aspx?src={$data['http']}/{:url('index/Arc/download')}?id={$data.arc_id}" width='100%' height='100%' frameborder='1'></iframe> -->
                          
                          <!-- <video id="video" controls="controls" width="500px" height="300px" autoplay="autoplay">
                                <source src="{$filePath}" type="video/mp4">
                          </video> -->
                        {if condition="($data.arc_type == 'mp4') OR ($data.arc_type == 'wmv') OR ($data.arc_type == 'rmvb') OR ($data.arc_type == 'mkv') "}
                        <div id="myElement">读取中</div>
                         <script type="text/javascript">
                            var playerInstance = jwplayer("myElement");
                            playerInstance.setup({
                                file: "{$data.filePath}",
                           
                                width: 860,
                                height: 360,
                                title: '',
                                description: ''
                            });
                        </script>
                        {elseif condition="($data.arc_type == 'jpg') OR ($data.arc_type == 'jpeg') OR ($data.arc_type == 'bmp') OR ($data.arc_type == 'png') "/} 
                                <div style="text-align:center;"><img src="{$filePath}" style="max-width: 860px;vertical-align:middle;"></div>
                        {/if}
                    </div>
                    <div class="tab-pane active" id="tab2" >
                        
                        <div class="form-group">
                            <label class="col-md-3 control-label">时间</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.time}" name="time" class="form-control" placeholder="请输入时间">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">地点</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.place}" name="place" class="form-control" placeholder="请输入地点">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">人物</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.person}" name="person" class="form-control" placeholder="请输入人物">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">图片所属事件关键词</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.keyword}" name="keyword" class="form-control" placeholder="请输入图片所属事件关键词">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">内容摘要</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.brief}" name="brief" class="form-control" placeholder="请输入内容摘要">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">图片出处</label>
                            <div class="col-md-9">
                                <input type="text" value="{$data.source}" name="source" class="form-control" placeholder="请输入图片出处">
                            </div>
                        </div>
                        
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn default model1close" data-dismiss="modal">关闭</button>
            <button type="button" class="btn blue save">保存</button>
        </div>
    </div>
</div>



<div class="modal fade " id="model2" tabindex="-1" role="model2" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close closeBtn" data-dismiss="model2" aria-hidden="true"></button>
                <h4 class="modal-title">选择档案盒</h4>
            </div>
            <div class="modal-body">

                <div class="selectShow" style="display: none"></div>
                <form class="modal2Form form-horizontal" action="{:url('index/Arc/updateTags')}" method="post">
                    <div class="portlet green box">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-cogs"></i>档案盒树型菜单
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id="tree_1" class="tree-demo" >
                                {$tree}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn default closeBtn" data-dismiss="modal2">关闭</button>
                <button type="button" class="btn blue saveBtn2">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/assets/scripts/core/jquery.media.js" type="text/javascript"></script>
<script>
    $(function() {
        var did='',dname='';
        App.init();
        UITree.init();
        arc_time = '{$data.arc_time}';
        $('.arc_time').val(arc_time);
        $('.tags').click(function () {
            var id = $(this).data('id');
            if (id == 1) {
                $('#tab1').show();
                $('#tab2').hide();
            } else {
                $('#tab2').show();
                $('#tab1').hide();
            }
            $('.tags').removeClass('active');
            $(this).addClass('active');
            $('.tag_val').val(id);
            return false;
        });
        $('.seBtn').click(function () {
            $('#model2').modal('show');
            $("#tree_1").on('changed.jstree', function (e, data) {
                var id = data.node.data.id;

                $('.selectShow').hide(100);
                $.ajax({
                    url:'{:url("index/Storage/getStorage3")}',
                    data:{id:id},
                    type:'post',
                    dataType:'json',
                    success:function (e) {
                        if(e.code == 1){
                            var html =  '<div class="alert alert-success alert-dismissable">' +
                                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                                '<strong>档案盒名称：'+e.data.sto_name+'，厚度：'+e.data.sto_thickness+'，总页数：'+e.data.sto_available_pages+'，已存放页数：'+e.data.to_available_pages+'，可存放页数'+e.data.sy_available_pages+'</strong> '+
                                '</div>';
                            did = id;
                            dname = e.data.sto_name;
                        }else{
                            var html =  '<div class="alert alert-danger alert-dismissable">' +
                                '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                                '<strong>'+e.msg+'</strong> '+
                                '</div>';
                            did = '';
                            dname = '';
                        }
                        $('.selectShow').html(html);
                        $('.selectShow').show(100);
                    }
                });

                return false;
            });
            return false;
        });
        $('.saveBtn2').click(function () {
            if(did == ''){
                var html =  '<div class="alert alert-danger alert-dismissable">' +
                    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>' +
                    '<strong>请选择档案盒</strong> '+
                    '</div>';
                $('.selectShow').html(html);
                $('.selectShow').show(100);
            }else{
                $('.box_id').val(did);
                $('.box_name').val(dname);
                $('#model2').modal('hide');
            }
        });
        $('.closeBtn').click(function () {
            $('#model2').modal('hide');
        });
        dt().modalSave();
    });
</script>
